<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站右侧弹出组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #007bff;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --border: #eee;
      
      /* 主题色 */
      --theme1: #1877F2; /* 社交蓝 */
      --theme2: #E4405F; /* 活力粉 */
      --theme3: #00C853; /* 清新绿 */
      --theme4: #212529; /* 商务黑 */
      --theme5: #FF9800; /* 温暖橙 */
      --theme6: #9C27B0; /* 个性紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      position: relative;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: transform 0.3s ease;
    }
    
    .container.sidebar-open {
      transform: translateX(-280px);
    }
    
    /* 示例内容区 */
    .demo-content {
      padding: 20px;
    }
    
    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
    }
    
    .menu-toggle {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--dark);
      cursor: pointer;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .content-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      box-shadow: var(--shadow);
      margin-bottom: 15px;
    }
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .card-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 0;
    }
    
    /* 右侧弹出组件 */
    .sidebar {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 280px;
      background-color: var(--white);
      z-index: 1050;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      max-width: 85%;
    }
    
    .sidebar.active {
      transform: translateX(0);
    }
    
    .sidebar-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1040;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .sidebar-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    /* 侧边栏头部 */
    .sidebar-header {
      padding: 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .sidebar-header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-sidebar {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--dark);
      cursor: pointer;
    }
    
    .user-profile {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 15px 20px;
    }
    
    .profile-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .profile-info {
      flex: 1;
    }
    
    .profile-name {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 2px;
    }
    
    .profile-status {
      font-size: 12px;
      color: #666;
    }
    
    /* 侧边栏菜单 */
    .sidebar-menu {
      flex: 1;
      overflow-y: auto;
      padding: 10px 0;
    }
    
    .menu-section {
      margin-bottom: 15px;
    }
    
    .menu-section-title {
      padding: 0 20px 5px;
      font-size: 12px;
      font-weight: 600;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      color: var(--dark);
      text-decoration: none;
      transition: all 0.2s;
      cursor: pointer;
    }
    
    .menu-item:hover {
      background-color: rgba(0, 0, 0, 0.03);
    }
    
    .menu-item.active {
      background-color: rgba(0, 123, 255, 0.1);
      color: var(--primary);
    }
    
    .menu-icon {
      width: 22px;
      text-align: center;
    }
    
    .menu-text {
      flex: 1;
      font-size: 15px;
    }
    
    .menu-badge {
      background-color: var(--primary);
      color: white;
      border-radius: 10px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 500;
    }
    
    /* 功能区块 */
    .feature-block {
      padding: 15px 20px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    
    .block-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #666;
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    
    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 5px;
      border-radius: 8px;
      background-color: rgba(0, 0, 0, 0.03);
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .feature-item:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    
    .feature-icon {
      font-size: 20px;
      color: var(--primary);
      margin-bottom: 5px;
    }
    
    .feature-text {
      font-size: 12px;
      text-align: center;
    }
    
    /* 侧边栏底部 */
    .sidebar-footer {
      padding: 15px 20px;
      border-top: 1px solid var(--border);
    }
    
    .footer-menu {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }
    
    .footer-menu-item {
      color: #666;
      font-size: 13px;
      text-decoration: none;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { --primary: var(--theme6); }
    
    /* 主题1：社交蓝 */
    .theme1 .sidebar {
      background-color: #f9fafd;
    }
    
    .theme1 .menu-item.active,
    .theme1 .feature-item {
      background-color: rgba(24, 119, 242, 0.1);
    }
    
    /* 主题2：活力粉 */
    .theme2 .sidebar {
      background-color: #fff5f8;
    }
    
    .theme2 .menu-item.active,
    .theme2 .feature-item {
      background-color: rgba(228, 64, 95, 0.1);
    }
    
    /* 主题3：清新绿 */
    .theme3 .sidebar {
      background-color: #f0fff4;
    }
    
    .theme3 .menu-item.active,
    .theme3 .feature-item {
      background-color: rgba(0, 200, 83, 0.1);
    }
    
    /* 主题4：商务黑 */
    .theme4 {
      --border: #333;
      --dark: white;
    }
    
    .theme4 .container,
    .theme4 .sidebar,
    .theme4 .content-card {
      background-color: #121212;
    }
    
    .theme4 .menu-item:hover,
    .theme4 .feature-item:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
    
    .theme4 .menu-item.active,
    .theme4 .feature-item {
      background-color: rgba(33, 37, 41, 0.5);
    }
    
    .theme4 .profile-status,
    .theme4 .menu-section-title,
    .theme4 .footer-menu-item,
    .theme4 .card-desc,
    .theme4 .menu-toggle,
    .theme4 .close-sidebar,
    .theme4 .block-title {
      color: #aaa;
    }
    
    /* 主题5：温暖橙 */
    .theme5 .sidebar {
      background-color: #fff8e6;
    }
    
    .theme5 .menu-item.active,
    .theme5 .feature-item {
      background-color: rgba(255, 152, 0, 0.1);
    }
    
    /* 主题6：个性紫 */
    .theme6 .sidebar {
      background-color: #f3e5f5;
    }
    
    .theme6 .menu-item.active,
    .theme6 .feature-item {
      background-color: rgba(156, 39, 176, 0.1);
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .sidebar-enter {
      animation: fadeIn 0.3s;
    }
    
    /* 响应式 */
    @media (max-width: 360px) {
      .sidebar {
        width: 250px;
      }
      
      .container.sidebar-open {
        transform: translateX(-250px);
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择右侧栏样式</div>
    <div class="switcher-option active" data-style="1">社交蓝</div>
    <div class="switcher-option" data-style="2">活力粉</div>
    <div class="switcher-option" data-style="3">清新绿</div>
    <div class="switcher-option" data-style="4">商务黑</div>
    <div class="switcher-option" data-style="5">温暖橙</div>
    <div class="switcher-option" data-style="6">个性紫</div>
  </div>
  
  <div class="container theme1">
    <div class="page-header">
      <h1 class="page-title">首页</h1>
      <button class="menu-toggle" id="menuToggle">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
    
    <div class="demo-content">
      <div class="content-card">
        <h3 class="card-title">社交动态</h3>
        <p class="card-desc">查看好友最新动态和分享内容，参与互动讨论。</p>
      </div>
      
      <div class="content-card">
        <h3 class="card-title">消息通知</h3>
        <p class="card-desc">查看新消息、评论、点赞和关注通知。</p>
      </div>
      
      <div class="content-card">
        <h3 class="card-title">热门话题</h3>
        <p class="card-desc">浏览当前最热门的话题和讨论，参与其中。</p>
      </div>
      
      <div class="content-card">
        <h3 class="card-title">推荐好友</h3>
        <p class="card-desc">根据你的兴趣和人脉，发现可能认识的人。</p>
      </div>
      
      <div class="content-card">
        <h3 class="card-title">设置中心</h3>
        <p class="card-desc">管理账号设置、隐私权限和通知偏好。</p>
      </div>
    </div>
  </div>
  
  <!-- 右侧弹出组件1 - 社交蓝 -->
  <div class="sidebar theme1" id="sidebar1">
    <div class="sidebar-header">
      <h3 class="sidebar-header-title">菜单</h3>
      <button class="close-sidebar">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="user-profile">
      <div class="profile-avatar">
        <img src="https://picsum.photos/id/64/200" alt="用户头像">
      </div>
      <div class="profile-info">
        <div class="profile-name">张小明</div>
        <div class="profile-status">在线 · 查看个人主页</div>
      </div>
    </div>
    
    <div class="feature-block">
      <div class="block-title">快捷功能</div>
      <div class="feature-grid">
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-pencil"></i></div>
          <div class="feature-text">发动态</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-image"></i></div>
          <div class="feature-text">传照片</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-video-camera"></i></div>
          <div class="feature-text">拍视频</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-map-marker"></i></div>
          <div class="feature-text">签到</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-gift"></i></div>
          <div class="feature-text">送礼物</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-plus-circle"></i></div>
          <div class="feature-text">更多</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-menu">
      <div class="menu-section">
        <div class="menu-section-title">个人中心</div>
        <div class="menu-item active">
          <div class="menu-icon"><i class="fa fa-user"></i></div>
          <div class="menu-text">个人主页</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-bookmark"></i></div>
          <div class="menu-text">我的收藏</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-list"></i></div>
          <div class="menu-text">我的动态</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-heart"></i></div>
          <div class="menu-text">我的喜欢</div>
        </div>
      </div>
      
      <div class="menu-section">
        <div class="menu-section-title">系统</div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-cog"></i></div>
          <div class="menu-text">设置</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-bell"></i></div>
          <div class="menu-text">通知设置</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-question-circle"></i></div>
          <div class="menu-text">帮助与反馈</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-sign-out"></i></div>
          <div class="menu-text">退出登录</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="footer-menu">
        <a href="#" class="footer-menu-item">关于我们</a>
        <a href="#" class="footer-menu-item">隐私政策</a>
        <a href="#" class="footer-menu-item">用户协议</a>
      </div>
    </div>
  </div>
  
  <!-- 右侧弹出组件2 - 活力粉 -->
  <div class="sidebar theme2" id="sidebar2">
    <div class="sidebar-header">
      <h3 class="sidebar-header-title">菜单</h3>
      <button class="close-sidebar">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="user-profile">
      <div class="profile-avatar">
        <img src="https://picsum.photos/id/65/200" alt="用户头像">
      </div>
      <div class="profile-info">
        <div class="profile-name">李小花</div>
        <div class="profile-status">时尚博主 · 3.2k粉丝</div>
      </div>
    </div>
    
    <div class="feature-block">
      <div class="block-title">创作中心</div>
      <div class="feature-grid">
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-pencil"></i></div>
          <div class="feature-text">发笔记</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-camera"></i></div>
          <div class="feature-text">穿搭</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-shopping-bag"></i></div>
          <div class="feature-text">好物</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-video-camera"></i></div>
          <div class="feature-text">视频</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-tags"></i></div>
          <div class="feature-text">话题</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-plus-circle"></i></div>
          <div class="feature-text">更多</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-menu">
      <div class="menu-section">
        <div class="menu-section-title">我的内容</div>
        <div class="menu-item active">
          <div class="menu-icon"><i class="fa fa-user"></i></div>
          <div class="menu-text">个人主页</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-th-large"></i></div>
          <div class="menu-text">我的作品</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-heart"></i></div>
          <div class="menu-text">收到的喜欢</div>
          <div class="menu-badge">24</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-comment"></i></div>
          <div class="menu-text">评论管理</div>
          <div class="menu-badge">8</div>
        </div>
      </div>
      
      <div class="menu-section">
        <div class="menu-section-title">账户</div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-cog"></i></div>
          <div class="menu-text">设置</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-star"></i></div>
          <div class="menu-text">会员中心</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-credit-card"></i></div>
          <div class="menu-text">我的钱包</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-sign-out"></i></div>
          <div class="menu-text">退出</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="footer-menu">
        <a href="#" class="footer-menu-item">时尚社区</a>
        <a href="#" class="footer-menu-item">帮助中心</a>
        <a href="#" class="footer-menu-item">合作联系</a>
      </div>
    </div>
  </div>
  
  <!-- 右侧弹出组件3 - 清新绿 -->
  <div class="sidebar theme3" id="sidebar3">
    <div class="sidebar-header">
      <h3 class="sidebar-header-title">菜单</h3>
      <button class="close-sidebar">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="user-profile">
      <div class="profile-avatar">
        <img src="https://picsum.photos/id/91/200" alt="用户头像">
      </div>
      <div class="profile-info">
        <div class="profile-name">王大力</div>
        <div class="profile-status">自然爱好者 · 在线</div>
      </div>
    </div>
    
    <div class="feature-block">
      <div class="block-title">活动</div>
      <div class="feature-grid">
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-map-marker"></i></div>
          <div class="feature-text">签到</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-camera"></i></div>
          <div class="feature-text">分享</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-calendar"></i></div>
          <div class="feature-text">活动</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-users"></i></div>
          <div class="feature-text">小组</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-flag"></i></div>
          <div class="feature-text">挑战</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-plus-circle"></i></div>
          <div class="feature-text">更多</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-menu">
      <div class="menu-section">
        <div class="menu-section-title">探索</div>
        <div class="menu-item active">
          <div class="menu-icon"><i class="fa fa-user"></i></div>
          <div class="menu-text">个人主页</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-tree"></i></div>
          <div class="menu-text">自然探索</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-map"></i></div>
          <div class="menu-text">徒步路线</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-camera"></i></div>
          <div class="menu-text">自然摄影</div>
        </div>
      </div>
      
      <div class="menu-section">
        <div class="menu-section-title">设置</div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-cog"></i></div>
          <div class="menu-text">设置</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-bell"></i></div>
          <div class="menu-text">通知</div>
          <div class="menu-badge">2</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-leaf"></i></div>
          <div class="menu-text">环保倡议</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-sign-out"></i></div>
          <div class="menu-text">退出</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="footer-menu">
        <a href="#" class="footer-menu-item">关于我们</a>
        <a href="#" class="footer-menu-item">环保倡议</a>
        <a href="#" class="footer-menu-item">联系我们</a>
      </div>
    </div>
  </div>
  
  <!-- 右侧弹出组件4 - 商务黑 -->
  <div class="sidebar theme4" id="sidebar4">
    <div class="sidebar-header">
      <h3 class="sidebar-header-title">菜单</h3>
      <button class="close-sidebar">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="user-profile">
      <div class="profile-avatar">
        <img src="https://picsum.photos/id/177/200" alt="用户头像">
      </div>
      <div class="profile-info">
        <div class="profile-name">赵总监</div>
        <div class="profile-status">产品总监 · 在线</div>
      </div>
    </div>
    
    <div class="feature-block">
      <div class="block-title">工作</div>
      <div class="feature-grid">
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-file-text"></i></div>
          <div class="feature-text">文档</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-tasks"></i></div>
          <div class="feature-text">任务</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-calendar"></i></div>
          <div class="feature-text">日程</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-users"></i></div>
          <div class="feature-text">团队</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-comments"></i></div>
          <div class="feature-text">沟通</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-plus-circle"></i></div>
          <div class="feature-text">更多</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-menu">
      <div class="menu-section">
        <div class="menu-section-title">工作区</div>
        <div class="menu-item active">
          <div class="menu-icon"><i class="fa fa-dashboard"></i></div>
          <div class="menu-text">工作台</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-tasks"></i></div>
          <div class="menu-text">项目进度</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-calendar-check-o"></i></div>
          <div class="menu-text">日程安排</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-bar-chart"></i></div>
          <div class="menu-text">业绩报表</div>
        </div>
      </div>
      
      <div class="menu-section">
        <div class="menu-section-title">设置</div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-cog"></i></div>
          <div class="menu-text">账户设置</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-bell"></i></div>
          <div class="menu-text">通知</div>
          <div class="menu-badge">7</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-question-circle"></i></div>
          <div class="menu-text">帮助中心</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-sign-out"></i></div>
          <div class="menu-text">退出</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="footer-menu">
        <a href="#" class="footer-menu-item">企业版</a>
        <a href="#" class="footer-menu-item">隐私政策</a>
        <a href="#" class="footer-menu-item">服务条款</a>
      </div>
    </div>
  </div>
  
  <!-- 右侧弹出组件5 - 温暖橙 -->
  <div class="sidebar theme5" id="sidebar5">
    <div class="sidebar-header">
      <h3 class="sidebar-header-title">菜单</h3>
      <button class="close-sidebar">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="user-profile">
      <div class="profile-avatar">
        <img src="https://picsum.photos/id/342/200" alt="用户头像">
      </div>
      <div class="profile-info">
        <div class="profile-name">陈美食</div>
        <div class="profile-status">美食博主 · 5.8k粉丝</div>
      </div>
    </div>
    
    <div class="feature-block">
      <div class="block-title">美食创作</div>
      <div class="feature-grid">
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-cutlery"></i></div>
          <div class="feature-text">发食谱</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-map-marker"></i></div>
          <div class="feature-text">探店</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-camera"></i></div>
          <div class="feature-text">美食照</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-video-camera"></i></div>
          <div class="feature-text">教程</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-shopping-cart"></i></div>
          <div class="feature-text">食材</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-plus-circle"></i></div>
          <div class="feature-text">更多</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-menu">
      <div class="menu-section">
        <div class="menu-section-title">我的美食</div>
        <div class="menu-item active">
          <div class="menu-icon"><i class="fa fa-user"></i></div>
          <div class="menu-text">个人主页</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-book"></i></div>
          <div class="menu-text">我的食谱</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-map-marker"></i></div>
          <div class="menu-text">探店记录</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-star"></i></div>
          <div class="menu-text">收藏美食</div>
        </div>
      </div>
      
      <div class="menu-section">
        <div class="menu-section-title">社区</div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-users"></i></div>
          <div class="menu-text">美食社群</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-bell"></i></div>
          <div class="menu-text">通知</div>
          <div class="menu-badge">12</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-cog"></i></div>
          <div class="menu-text">设置</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-sign-out"></i></div>
          <div class="menu-text">退出</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="footer-menu">
        <a href="#" class="footer-menu-item">关于我们</a>
        <a href="#" class="footer-menu-item">联系合作</a>
        <a href="#" class="footer-menu-item">帮助中心</a>
      </div>
    </div>
  </div>
  
  <!-- 右侧弹出组件6 - 个性紫 -->
  <div class="sidebar theme6" id="sidebar6">
    <div class="sidebar-header">
      <h3 class="sidebar-header-title">菜单</h3>
      <button class="close-sidebar">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="user-profile">
      <div class="profile-avatar">
        <img src="https://picsum.photos/id/345/200" alt="用户头像">
      </div>
      <div class="profile-info">
        <div class="profile-name">林创意</div>
        <div class="profile-status">设计师 · 创意工作者</div>
      </div>
    </div>
    
    <div class="feature-block">
      <div class="block-title">创作</div>
      <div class="feature-grid">
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-paint-brush"></i></div>
          <div class="feature-text">作品</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-lightbulb-o"></i></div>
          <div class="feature-text">灵感</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-camera"></i></div>
          <div class="feature-text">摄影</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-pencil"></i></div>
          <div class="feature-text">文字</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-music"></i></div>
          <div class="feature-text">音乐</div>
        </div>
        <div class="feature-item">
          <div class="feature-icon"><i class="fa fa-plus-circle"></i></div>
          <div class="feature-text">更多</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-menu">
      <div class="menu-section">
        <div class="menu-section-title">创意空间</div>
        <div class="menu-item active">
          <div class="menu-icon"><i class="fa fa-user"></i></div>
          <div class="menu-text">个人主页</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-th-large"></i></div>
          <div class="menu-text">我的作品</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-lightbulb-o"></i></div>
          <div class="menu-text">灵感库</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-heart"></i></div>
          <div class="menu-text">获赞作品</div>
          <div class="menu-badge">36</div>
        </div>
      </div>
      
      <div class="menu-section">
        <div class="menu-section-title">设置</div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-cog"></i></div>
          <div class="menu-text">账户设置</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-shopping-cart"></i></div>
          <div class="menu-text">创意商店</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-users"></i></div>
          <div class="menu-text">创意社群</div>
        </div>
        <div class="menu-item">
          <div class="menu-icon"><i class="fa fa-sign-out"></i></div>
          <div class="menu-text">退出</div>
        </div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="footer-menu">
        <a href="#" class="footer-menu-item">创意社区</a>
        <a href="#" class="footer-menu-item">帮助中心</a>
        <a href="#" class="footer-menu-item">版权说明</a>
      </div>
    </div>
  </div>
  
  <!-- 遮罩层 -->
  <div class="sidebar-overlay"></div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = '1';
    let sidebarOpen = false;
    let activeSidebar = null;
    
    // DOM元素
    const container = document.querySelector('.container');
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const sidebars = {
      '1': document.getElementById('sidebar1'),
      '2': document.getElementById('sidebar2'),
      '3': document.getElementById('sidebar3'),
      '4': document.getElementById('sidebar4'),
      '5': document.getElementById('sidebar5'),
      '6': document.getElementById('sidebar6')
    };
    const sidebarOverlay = document.querySelector('.sidebar-overlay');
    const menuToggle = document.getElementById('menuToggle');
    const closeButtons = document.querySelectorAll('.close-sidebar');
    const menuItems = document.querySelectorAll('.menu-item');
    const featureItems = document.querySelectorAll('.feature-item');
    
    // 初始化
    function init() {
      // 设置初始激活的侧边栏
      activeSidebar = sidebars[currentStyle];
      
      // 样式切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = this.getAttribute('data-style');
          switchStyle(style);
        });
      });
      
      // 菜单切换按钮
      menuToggle.addEventListener('click', toggleSidebar);
      
      // 关闭按钮
      closeButtons.forEach(btn => {
        btn.addEventListener('click', closeSidebar);
      });
      
      // 点击遮罩层关闭侧边栏
      sidebarOverlay.addEventListener('click', closeSidebar);
      
      // 菜单项点击事件
      menuItems.forEach(item => {
        item.addEventListener('click', function() {
          // 移除同组所有激活状态
          const section = this.closest('.menu-section');
          section.querySelectorAll('.menu-item').forEach(menuItem => {
            menuItem.classList.remove('active');
          });
          
          // 设置当前项为激活
          this.classList.add('active');
          
          // 显示提示
          const menuText = this.querySelector('.menu-text').textContent;
          alert(`已选择：${menuText}`);
          
          // 在移动设备上，点击菜单项后关闭侧边栏
          if (window.innerWidth <= 768) {
            closeSidebar();
          }
        });
      });
      
      // 快捷功能项点击事件
      featureItems.forEach(item => {
        item.addEventListener('click', function() {
          const featureText = this.querySelector('.feature-text').textContent;
          alert(`已选择：${featureText}`);
        });
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 关闭当前打开的侧边栏
      if (sidebarOpen) {
        closeSidebar();
      }
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新容器主题
      container.className = 'container';
      container.classList.add(`theme${style}`);
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
      
      // 更新激活的侧边栏
      activeSidebar = sidebars[style];
    }
    
    // 切换侧边栏显示/隐藏
    function toggleSidebar() {
      if (sidebarOpen) {
        closeSidebar();
      } else {
        openSidebar();
      }
    }
    
    // 打开侧边栏
    function openSidebar() {
      if (!activeSidebar) return;
      
      sidebarOpen = true;
      activeSidebar.classList.add('active', 'sidebar-enter');
      sidebarOverlay.classList.add('active');
      container.classList.add('sidebar-open');
    }
    
    // 关闭侧边栏
    function closeSidebar() {
      if (!activeSidebar) return;
      
      sidebarOpen = false;
      activeSidebar.classList.remove('active');
      sidebarOverlay.classList.remove('active');
      container.classList.remove('sidebar-open');
    }
    
    // 启动
    init();
  </script>
</body>
</html>
